# Custom Themes

Umo Viewer's primary theme variables are declared using [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). We recommend customizing themes by replacing CSS variables.

### Theme Configuration
Umo Viewer supports a dark theme.  See [Theme Configuration](./options/themes).

## CSS Variables

Below are all available CSS variables. [Click here](https://github.com/umodoc/viewer/tree/main/src/assets/styles/_variables.less) to view the full list of CSS variables.

```css
/* Default Theme */
```css
:root {
  /** Theme Colors **/
  --uv-primary-color: #3480f9;
  --uv-color-white: #fff;
  --uv-color-black: #000;

  /** Font **/
  --uv-font-family:
    helvetica neue, helvetica, pingfang sc, hiragino sans gb, microsoft yahei,
    simsun, sans-serif;
  --uv-font-size: 14px;
  --uv-font-size-small: 12px;
  --uv-text-color: rgb(51, 54, 57);
  --uv-text-color-light: rgba(0, 0, 0, 0.5);

  /** Border **/
  --uv-shadow:
    0 3px 14px 2px rgba(0, 0, 0, 0.03), 0 8px 10px 1px rgba(0, 0, 0, 4%),
    0 5px 5px -3px rgba(0, 0, 0, 8%);
  --uv-border-color: rgba(0, 0, 0, 0.08);
  --uv-border-color-light: rgba(0, 0, 0, 0.05);

  /** Border Radius **/
  --uv-radius: 3px;
  --uv-radius-medium: 5px;

  /** Popup **/
  --uv-popup-content-padding: 12px;
  --uv-popup-max-height: max(60vh, 180px);
  --uv-tooltip-content-padding: 6px 10px;
  --uv-mask-color: transparent;

  /** Layout **/
  --uv-header-height: 56px;
  --uv-container-background: #f4f5f7;
  --uv-page-shadow:
    rgba(0, 0, 0, 0.06) 0px 0px 10px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px;

  /** Scrollbar **/
  --uv-scrollbar-size: 6px;
  --uv-scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
  --uv-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.35);
}

/** Dark Theme **/
[theme-mode='dark'] {
  --uv-color-white: #17171a;
  --uv-color-black: #fff;
  --uv-text-color: #ddd;
  --uv-text-color-light: #bbb;
  --uv-border-color: rgba(255, 255, 255, 0.15);
  --uv-border-color-dark: rgba(255, 255, 255, 0.2);
  --uv-border-color-light: rgba(255, 255, 255, 0.08);
  --uv-container-background: #2a2b2d;
}
```

## Example

```vue
<template>
  <div class="theme-demo">
    <umo-editor />
  </div>
</template>

<script setup>
import { UmoViewer } from '@umoteam/viewer'
</script>

<style>
.theme-demo {
  --umo-primary-color: red;
  /* ... */
}
</style>
```

## Online Customization

You can visit [https://www.umodoc.com/en/demo?target=viewer&pane=themes](https://www.umodoc.com/en/demo?target=viewer&pane=themes), switch to the "Theme Settings" tab in the right-side settings panel, and modify the CSS variable values to preview the theme effects.
